<template>
    <view class="main-contanier">
        <view class="form-wrap">
            <view class="form-item">
                <view class="title-wrap">性别</view>
                <view class="label-wrap">
                    <uni-data-checkbox v-model="formData.gender" selectedColor="#008000" :localdata="genders"></uni-data-checkbox>
                </view>
            </view>


            <view class="btn-wrap">
                <text class="btn" @click="handlerSave">保 存</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { useUserStore } from '@/stores'


// 定义性别数据
const genders = ref([
    {
        text: '男',
        value: 1
    },
    {
        text: '女',
        value: 0
    },
    {
        text: '保密',
        value: 2
    }
])

// 用户存储
const userStore = useUserStore()

// 定义提交参数
const formData = reactive({
	gender: userStore.profile.user.gender,
})


// 保存数据
const handlerSave = async () => {
    await userStore.editOtherInfo(formData)
    uni.showToast({
        title: '修改成功',
        duration: 1000
    })
}
</script>

<style scoped lang="scss">
    .main-contanier {
        padding: 20rpx 10rpx 0 10rpx;
        .form-wrap {
            background-color: #fff;
            padding: 10rpx;
            .form-item {
                padding: 20rpx;

                display: flex;
                align-items: center;
                .title-wrap {
                    width: 100rpx;
                    text-align: end;
                }
                .label-wrap {
                    margin-left: 30rpx;
                }
            }
        }

        // 保存按钮区域
        .btn-wrap {
            padding-top: 30rpx;
            padding-bottom: 20rpx;
            display: flex;
            justify-content: center;
            border-top: 2rpx solid #ccc;
            .btn {
                display: block;
                width: 600rpx;
                height: 70rpx;
                line-height: 70rpx;
                border-radius: 35rpx;
                color: #fff;
                text-align: center;
                background-color: #008000;
            }
        }
    }
</style>